<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https:d3js.org/d3.v6.min.js"></script>
</head>
</head>
<body>
  <script>
    var data = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,]
    var width = 600;
    var height = 600;
    var innerRadius = 0
    var outerRadius = 250
    var pie = d3.pie()
    var arcs = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)

      sum =0
      pie(data).forEach(function(d,i){
				d._endAngle=d.endAngle;
				d.endAngle=d.startAngle;
				d.duration=2000*(d.data/d3.sum(data));//动画时长2秒，计算每一个弧形所用动画时间
				d.delaytime=sum;
				sum+=d.duration;
			})

    
    var svg = d3.select('body')
      .append('svg')
      .attr('transform','translate('+300+','+250+')')
      .attr('width',width)
      .attr('height',height)

    var g = svg
      .selectAll('g')
      .data(pie(data))
      .join('g')
	    .attr('transform','translate('+this.width/2+','+this.height/2+')')

    g.append('path')
     .attr('d',function(d){return arcs(d)})
     .attr('fill',function(d,i){
      return i<=5?'green':i<=10?'blue':i<=15?'purple':i<=20?'red':'pink'
    })
      // .attr('fill','none')
      // .attr('stroke','black')
      .attr('transform',function(d,i){
        var midAngle = (d.startAngle+d.endAngle)/2
        return 'translate('+(2*Math.sin(midAngle))+','+(-2*Math.cos(midAngle))+')'
        //给饼图中间按添加空隙
      })
      .transition()
				.duration(function(d,i){
          console.log(d.startAngle);
          
					return d.duration;
				})
				// .ease("linear")
				.delay(function(d,i){
					return d.delaytime;
				})
				.attrTween("d", tweenArc(function(d, i) {
					return {
						startAngle: d.startAngle,	
						endAngle: d._endAngle
					};
				}))
				;
      

    g.append('text')
      .text(function(d){return d.data})
	    .attr('transform',d=>{
		    return 'translate('+ arcs.centroid(d)+')'
	    })
	      .attr('text-anchor','middle')
    
  
        function tweenArc(b) {
			 	return function(a, i) {
			 		var d = b.call(this, a, i),
			 			i = d3.interpolate(a, d);
			 			//d保存转换之后的信息
			 			//插值模式，从d.endAnle=d.startAngle到d.endAngle=d._endAngle转换
			 		return function(t) {
			 			return arc(i(t));
			 		};
        };
      }
      var scales =d3.scaleOrdinal()
.domain([1,2,3,4])
.range([0, 100]);
 console.log(scale(1));
  </script>
</body>
</html>